<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '1000px' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="基本信息">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="封面" prop="cover">
                <SingleImg
                  :disabled="true"
                  modular="course"
                  type="annexpic"
                  v-model="dataForm.cover"
                  tip="封面"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="名称" prop="name">
                <p>{{ dataForm.name }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程编码" prop="code">
                <p>{{ dataForm.code }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程目录" prop="category">
                <p>{{ dataForm.category }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="讲师" prop="teacher">
                <p>{{ dataForm.teacher }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签" prop="label">
                <p>{{ dataForm.label }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="课程介绍" prop="description">
                <p>{{ dataForm.description }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="创建用户" prop="creatorUserId">
                <p>{{ dataForm.creatorUserId }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="创建时间" prop="creatorTime">
                <p>{{ dataForm.creatorTime }}</p>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="状态" prop="enabledMark">
                <p>
                  {{ dataForm.enabledMark | dynamicText(enabledMarkOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <div class="jsbos-common-title">
                  <h2>章节内容</h2>
                </div>
                <el-table :data="dataForm.temsCourseChapterList">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="name" label="名称">
                    <template slot-scope="scope">
                      <p>{{ scope.row.name }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="learningLength" label="学习时长">
                    <template slot-scope="scope">
                      <p>{{ scope.row.learningLength }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="fileSize" label="大小">
                    <template slot-scope="scope">
                      <p>{{ scope.row.fileSize }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="attachment" label="附加内容">
                    <template slot-scope="scope">
                      <p>{{ scope.row.attachment }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="sortCode" label="排序码">
                    <template slot-scope="scope">
                      <p>{{ scope.row.sortCode }}</p>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="可见范围">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="可见范围" prop="scope">
                <el-radio-group
                  v-model="dataForm.scopeType"
                  disabled
                  size="small"
                >
                  <el-radio
                    v-for="(item, index) in scopeOptions"
                    :key="index"
                    :label="item.id"
                    :disabled="item.disabled"
                  >
                    {{ item.fullName }}
                  </el-radio>
                </el-radio-group>
                <filterSelect
                  v-if="dataForm.scopeType == 'select'"
                  disabled
                  width="500px"
                  v-model="scopeJson"
                  @change="getScopeChangeData"
                ></filterSelect>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="文档学习设置">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文档学习时长" prop="docsLearningLength">
                <el-switch
                  v-model="dataForm.docsLearning"
                  :active-value="1"
                  :inactive-value="0"
                  disabled
                >
                </el-switch>
                <el-input-number
                  v-model="dataForm.docsLearningLength"
                  :disabled="!dataForm.docsLearning"
                  style="margin-left: 20px"
                  placeholder="开启"
                  :step="1"
                  controls-position="right"
                >
                </el-input-number>
                <ComText
                  :style="{ display: 'inline-block' }"
                  :textStyle="{
                    cursor: 'pointer',
                    color: '#8C8C8C',
                    'font-weight': 'normal',
                    'text-decoration': 'none',
                    'font-size': 12,
                    'line-height': 28,
                    'font-style': 'normal',
                    'text-align': 'left',
                    'margin-left': '20px',
                  }"
                  value="秒/页 如不设置文档学习时长，学员学习文档将不计时长"
                >
                </ComText>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="学习设置">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课后作业" prop="homework">
                <p>{{ dataForm.homework.name }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="课后考试" prop="homeExamName">
                <p>{{ dataForm.homeExamName }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程评估" prop="evaluation">
                <p>
                  {{ dataForm.evaluation | dynamicText(evaluationOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="学习资料" prop="learningMaterials">
                <UploadFz
                  v-model="dataForm.learningMaterials"
                  disabled
                  detailed
                  :fileSize="5"
                  sizeUnit="MB"
                  :limit="9"
                  buttonText="点击上传"
                >
                </UploadFz>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="学习奖励">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="学时" prop="learningPeriod">
                <el-input-number
                  disabled
                  v-model="dataForm.learningPeriod"
                  placeholder="数字文本"
                  :max="100"
                  :step="1"
                  :precision="1"
                  controls-position="right"
                >
                </el-input-number>
                <ComText
                  :style="{ display: 'inline-block' }"
                  :textStyle="{
                    cursor: 'pointer',
                    color: '#8C8C8C',
                    'font-weight': 'normal',
                    'text-decoration': 'none',
                    'font-size': 12,
                    'line-height': 28,
                    'font-style': 'normal',
                    'text-align': 'left',
                    'margin-left': '20px',
                  }"
                  value="保留一位小数，完成课程后才能获得此学时，不填则表示无学时"
                >
                </ComText>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="学分" prop="learningCredit">
                <el-input-number
                  disabled
                  v-model="dataForm.learningCredit"
                  placeholder="数字文本"
                  :max="100"
                  :step="1"
                  :precision="1"
                  controls-position="right"
                >
                </el-input-number>
                <ComText
                  :style="{ display: 'inline-block' }"
                  :textStyle="{
                    cursor: 'pointer',
                    color: '#8C8C8C',
                    'font-weight': 'normal',
                    'text-decoration': 'none',
                    'font-size': 12,
                    'line-height': 28,
                    'font-style': 'normal',
                    'text-align': 'left',
                    'margin-left': '20px',
                  }"
                  value="保留一位小数，完成课程后才能获得此学分，不填则表示无分"
                >
                </ComText>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="防作弊">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="倍速播放" prop="preventionDsp">
                <el-switch
                  disabled
                  v-model="dataForm.preventionDsp"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
                <ComText
                  :style="{ display: 'inline-block' }"
                  :textStyle="{
                    cursor: 'pointer',
                    color: '#8C8C8C',
                    'font-weight': 'normal',
                    'text-decoration': 'none',
                    'font-size': 12,
                    'line-height': 32,
                    'font-style': 'normal',
                    'text-align': 'left',
                    'margin-left': '20px',
                  }"
                  value="开启后，学员观看视频可以选择倍速播放且倍速播放时学习时长也倍速计算（举例：学员2倍速学习5分钟，学习时长计算10分钟）"
                >
                </ComText>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="进度条拖动" prop="preventionDpb">
                <el-switch
                  disabled
                  v-model="dataForm.preventionDpb"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
                <ComText
                  :style="{ display: 'inline-block' }"
                  :textStyle="{
                    cursor: 'pointer',
                    color: '#8C8C8C',
                    'font-weight': 'normal',
                    'text-decoration': 'none',
                    'font-size': 12,
                    'line-height': 32,
                    'font-style': 'normal',
                    'text-align': 'left',
                    'margin-left': '20px',
                  }"
                  value="进度条拖动  开启开启后，观看音视频课程时可拖动播放进度条"
                >
                </ComText>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="防挂机" prop="preventionHp">
                <el-switch
                  disabled
                  v-model="dataForm.preventionHp"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
                <ComText
                  :style="{ display: 'inline-block' }"
                  :textStyle="{
                    cursor: 'pointer',
                    color: '#8C8C8C',
                    'font-weight': 'normal',
                    'text-decoration': 'none',
                    'font-size': 12,
                    'line-height': 28,
                    'font-style': 'normal',
                    'text-align': 'left',
                    'margin-left': '20px',
                  }"
                  value="开启后，每"
                >
                </ComText>
                {{ dataForm.preventionHpMinute }}
                <ComText
                  :style="{ display: 'inline-block' }"
                  :textStyle="{
                    cursor: 'pointer',
                    color: '#8C8C8C',
                    'font-weight': 'normal',
                    'text-decoration': 'none',
                    'font-size': 12,
                    'line-height': 28,
                    'font-style': 'normal',
                    'text-align': 'left',
                  }"
                  value="分钟，系统会定时进行挂机检测"
                >
                </ComText>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
import SelectSource from "@/views/tems/source/manager/SelectSource";
import SelectCover from "../cover/Form";
import request from "@/utils/request";
import SingleImg from "@/components/upload/SingleImg";
import Preview from "@/components/Generator/components/Upload/Preview";
import FilterSelect from "@/components/Generator/components/filterSelect/index";
import HomeworkForm from "../homework/Form.vue";

export default {
  components: {
    SingleImg,
    SelectSource,
    SelectCover,
    Preview,
    FilterSelect,
    HomeworkForm,
  },
  props: [],
  name: "Detail",
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      scopeJson: [],
      dataForm: {
        id: "",
        cover: "",
        name: "",
        code: "",
        category: "",
        teacher: "",
        label: [],
        description: "",
        creatorUserId: "",
        creatorTime: "",
        scope: "3",
        docsLearningLength: 1,
        homework: "",
        homeExam: "",
        evaluation: "1",
        learningMaterials: [],
        learningRewards: "",
        preventionCheat: [],
        lastModifyUserId: [],
        lastModifyTime: 1,
        enabledMark: "10",
        temsCourseChapterList: [],
      },
      activetnlqtg: "0",
      categoryProps: { children: "children", label: "fullName", value: "id" },
      scopeOptions: [
        { fullName: "全公司", id: "all" },
        { fullName: "仅创建人", id: "creator" },
        {
          fullName: "指定人员",
          id: "select",
        },
      ],
      evaluationOptions: [
        { fullName: "星评", id: "1" },
        { fullName: "评估表", id: "2" },
      ],
      preventionCheatOptions: [{ fullName: "开启", id: "1" }],
      lastModifyUserIdOptions: [{ fullName: "开启", id: "1" }],
      enabledMarkOptions: [
        { fullName: "待发布", id: "10" },
        { fullName: "已发布", id: "20" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.cover = _dataAll.cover;
      if (!_dataAll.homework) {
        _dataAll.homework = { name: "" };
      }
      _dataAll.cover = _dataAll.cover;
      _dataAll.scope = JSON.parse(_dataAll.scope);
      this.scopeJson = _dataAll.scope;
      _dataAll.docsLearning = parseInt(_dataAll.docsLearning);
      _dataAll.learningMaterials = JSON.parse(_dataAll.learningMaterials);
      _dataAll.preventionDsp = parseInt(_dataAll.preventionDsp);
      _dataAll.preventionDpb = parseInt(_dataAll.preventionDpb);
      _dataAll.preventionHp = parseInt(_dataAll.preventionHp);
      this.dataForm = _dataAll;
    },

    goBack() {
      this.$nextTick(() => {
        this.$emit("refresh");
      });
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/course/TemsCourse/detail/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
  },
};
</script>
